<template>
    <div v-if="flag" class="warmPrompt">
        <van-loading type="spinner" color="#1989fa" size="24px">
            亲，加载中请稍后！
        </van-loading>
    </div>
    <div v-else>
<!-- 导航栏-->
        <div id="topImg" v-if="btnFlag"  @click="top"></div>
        <div class="swiperBox">
            <ul class="swiper">
                <li @click="tapEvery">
                    <div class="box">
                        <img src="../assets/OIP-C.jpg" alt="未加载">
                    </div>
                    <p style="margin-top: 3px;color: black">全部</p>
                </li>
                <li v-for="(item) in swiper"
                    :key="item.categoryId"
                    @click="tap(item.categoryId,item.name)"
                >
                        <div class="box">
                            <img :src="item.cover" alt="未加载">
                        </div>
                        <p style="margin-top: 3px;color: black">{{item.name}}</p>
                </li>
                <div style="clear: both"></div>
            </ul>
        </div>
        <div class="content">
            <div style="display: flex">
                <div style="width: 40%;height: 150px" class="xiaohua" @click="xiaohua">
<!--                    <img src="../assets/R-C.jpg" alt="">-->
                    <p class="text">笑话大全</p>
                </div>
                <div class="cat">
                    <router-link to="/search">
                        <h3 class="text mytitle">搜索喜爱</h3>
                        <p class="text">口袋帖子</p>
                    </router-link>
                </div>
            </div>
                    <van-pull-refresh
                            v-model="isLoading"
                            success-text="刷新成功"
                            @refresh="onRefresh"
                    >

            <h2 style="text-align: center" class="text">{{name}}</h2>
            <ul>
                <li v-for="(item,index) in postList" :key="index">
                    <router-link :to="{path:'/detail',query:{postsId:item.postsId}}" style="color:black">
                        <p style="font-size: 18px">
                            {{item.title}}
                            <span style="float: right;color: gray;font-size: 14px"><van-icon name="eye" style="margin-right: 5px" />{{item.readNum}}&nbsp;&nbsp;<van-icon name="good-job" style="margin-right: 5px" />{{item.zan}}</span>
                        </p>
                        <div class="contentText">
                            <div class="t">
                                <img :src="item.avatar" alt="" class="ava">
                                <span style="margin-left: 10px">{{item.userName}}</span>
                                <p style="margin-top: 5px;text-indent: 2em">{{item.intro}}</p>
                            </div>
                            <div class="tp">
                                <img :src="item.coverImgUrl" alt="">
                            </div>
                        </div>
                        <p style="margin-bottom: 5px;color: gray">{{item.createTime}}</p>
                    </router-link>
                </li>
                <router-link to="/search" class="chang">这么多都没你喜欢的去搜索吧</router-link>
            </ul>
                                </van-pull-refresh>
        </div>

    </div>
</template>

<script>
    import {classifyList, specialList} from '../api/api'
    import {Toast} from "vant";
    export default {
        name: "IndexContent",
        data(){
            return{
                postList:[],
                name:'',
                swiper:[],
                flag:true,
                btnFlag:false,
                isLoading: false,
                categoryId:''
            }
        },

        created(){
            specialList().then(res => {
                console.log(res)
                this.swiper = res.data.rows
            });
            classifyList('').then(res=>{
                // console.log(res)
                this.name = '全部帖子'
                this.postList = res.data.rows.reverse()
                //加到存储

                this.flag = false
            })

        },
        methods:{
            onRefresh() {
                    classifyList(this.categoryId).then(res=>{
                        // console.log(res)
                        this.postList = res.data.rows.reverse()
                        console.log(this.postList)
                        Toast('刷新成功');
                        this.isLoading = false;
                    })
            },
            tapEvery(){
                const tapEveryToast = Toast.loading({
                    duration:0,
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                    classifyList('').then(res=>{
                        // console.log(res)
                        this.categoryId=''
                        this.name = '全部帖子'
                        this.postList = res.data.rows.reverse()
                        tapEveryToast.clear()

                    })
            },
            tap(categoryId,name){
                this.categoryId = categoryId
                this.name = name
                const tapToast = Toast.loading({
                    duration:0,
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                classifyList(`${categoryId}`).then(res=>{
                    this.name = name
                    this.postList = res.data.rows.reverse()
                    tapToast.clear()
                })
            },
            xiaohua(){
                this.$router.push('/joke')
            },
            // 点击图片回到顶部方法，加计时器是为了过渡顺滑
            top () {
                const that = this
                let timer = setInterval(() => {
                    let ispeed = Math.floor(-that.scrollTop / 5)
                    document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                    if (that.scrollTop === 0) {
                        clearInterval(timer)
                    }
                }, 16)
            },

            // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
            scrollToTop () {
                const that = this
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                that.scrollTop = scrollTop
                if (that.scrollTop > 60) {
                    that.btnFlag = true
                } else {
                    that.btnFlag = false
                }
            }
        },
// vue的两个生命钩子，这里不多解释。
// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
        mounted () {
            window.addEventListener('scroll', this.scrollToTop)
        },
        destroyed () {
            window.removeEventListener('scroll', this.scrollToTop)
        },
    }
</script>

<style scoped>
    #topImg {
        width: 50px;
        height: 50px;
        position: fixed;
        right: 10%;
        top: 20%;
        /*padding: 10px;*/
        /*color: white;*/
        border-radius: 50%;
        background-image: url("../assets/火箭.jpg");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 10000000;
        /*text-align: center;*/
    }
    .xiaohua img{
        width: 100%;
    }
    .xiaohua p {
        margin: 0;
        text-align: center;
    }
    .xiaohua {
        /*background-color: white;*/
        background-image: url("../assets/R-C.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    .warmPrompt {
        height: 80vh;
        text-align: center;
        line-height: 80vh;
        font-size: 20px;
    }
    .swiperBox {
        width: 100%;
        height: 120px;
        overflow: scroll;
    }
    .swiper {
        width: 1900px;
    }
    .swiper>li {
        float: left;
        width: 100px;
        height: 100px;
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
    }
    .swiper>li img {
        width: 70px;
        height: 70px;
        border-radius: 25%;
    }
    .content {
        margin-top: 20px;
        margin-bottom: 80px;
    }
    .content li {
        width: 100%;
        height: 150px;
        padding: 10px;
        /*border: 1px solid gray;*/
        margin-bottom: 10px;
        box-sizing: border-box;
        /*border-image: linear-gradient(to right,skyblue,hotpink);*/

    }
    .content li:after {
        content: '';
        display: block;
        height: 1px;
        background-image: linear-gradient(to right,skyblue,hotpink);
    }
    .chang {
        margin:10px 0;
        text-align: center;
        display: block;
        width: 100%;
        color: gray;
    }
    .content p {
        margin: 0;
    }
    .contentText {
        margin-top: 5px;
        /*height: 120px;*/
        /*overflow: hidden;*/
    }
    .contentText:after {
        content:'';
        display: block;
        clear: both;
    }
    .contentText>div{
        float: left;
    }
    .ava {
        width: 25px;
        height: 25px;
        vertical-align: middle;
    }
    .t {
        width: 70%;
        padding-right: 10px;
        /*height: 50px;*/
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp:3;
        -webkit-box-orient: vertical;
        box-sizing: border-box;
    }
    .tp {
        width: 30%;
        height: 80px;
    }
    .tp>img {
        width: 100%;
        height: 100%;
    }
    .cat {
        width: 60%;
        background-image: url('../assets/机器猫.jpg');
        height: 150px;
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
    }
    .cat h3,
    .cat p {
        padding-left: 8px;
    }

    .text {
        color: transparent;
        background-image: -webkit-gradient(linear,left top,right top,color-stop(0,skyblue),color-stop(1,hotpink));
        -webkit-background-clip: text;
    }
    .mytitle {
        margin-top: -2px;
        margin-bottom: 105px;
    }

</style>